/*---------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation. All rights reserved.
 *--------------------------------------------------------------------------------------------
 * Copyright (c) 2024, Huawei Technologies.
 * All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0  (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *--------------------------------------------------------------------------------------------*/

import { computed, customElement, property } from '@polymer/decorators';
import { html, PolymerElement } from '@polymer/polymer';
import * as _ from 'lodash';
import { LegacyElementMixin } from '../polymer/legacy_element_mixin';

interface DisplayAttr {
  key: string;
  tooltip: string;
  value: any;
  className: string;
}
@customElement('node-ioinfo-item')
class NodeIoInfoItem extends LegacyElementMixin(PolymerElement) {
  static readonly template = html`
    <style>
      .sub-list-group {
        font-weight: 500;
        font-size: 12pt;
        width: 100%;
      }

      .toggle-button {
        float: right;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .io-name {
        display: inline-block;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12pt;
        font-weight: 400;
      }

      .attr-left {
        float: left;
        width: 30%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--secondary-text-color);
        font-size: 11pt;
        font-weight: 400;
      }

      .attr-right {
        margin-left: 35%;
        word-wrap: break-word;
        color: var(--secondary-text-color);
        font-size: 11pt;
        font-weight: 400;
      }

      .attr-list-item {
        padding-left: 8px;
      }

      .attr-error > div {
        color: red;
      }
    </style>
    <div>
      <paper-icon-button
        icon="{{_getToggleIcon(_attrExpanded)}}"
        on-click="_toggleInputsDataExpanded"
        class="toggle-button"
      >
      </paper-icon-button>
      <div class="sub-list-group">
        <span class="io-name" title="[[name]]">[[name]]</span>
        <template is="dom-if" if="{{_attrExpanded}}">
          <iron-list items="[[_displayAttrs]]">
            <template>
              <div class$="[[item.className]]">
                <div class="attr-left" title="[[item.tooltip]]">
                  [[item.key]]
                </div>
                <div class="attr-right" title="[[item.value]]">
                  [[item.value]]
                </div>
              </div>
            </template>
          </iron-list>
        </template>
      </div>
    </div>
  `;
  @property({
    type: String,
  })
  name: string = '';
  @property({
    type: Object,
  })
  attrs: Array<{ key: string; tooltip: string; value: any }> = [];
  @property({
    type: Boolean,
  })
  _attrExpanded: boolean = true;
  @computed('attrs')
  get _displayAttrs(): DisplayAttr[] {
    const errorItem = this.attrs.find((item) => item.key === 'error_key');
    if (errorItem && Array.isArray(errorItem.value)) {
      const errorKeys = errorItem.value as string[];
      const tempAttrs: DisplayAttr[] = [];
      _.each(
        this.attrs.filter((attr) => attr.key !== 'error_key'),
        (item) => {
          if (errorKeys.includes(item.key)) {
            tempAttrs.push({
              ...item,
              className: 'attr-list-item attr-error',
            });
          } else {
            tempAttrs.push({
              ...item,
              className: 'attr-list-item',
            });
          }
        }
      );
      return tempAttrs;
    } else {
      return _.map(this.attrs, (item) => {
        return {
          ...item,
          className: 'attr-list-item',
        };
      });
    }
  }
  _getToggleIcon(expanded) {
    return expanded ? 'expand-less' : 'expand-more';
  }
  _toggleInputsDataExpanded() {
    this._attrExpanded = !this._attrExpanded;
    this.fire('io-item-toggle');
  }
}
